<table class="charts">
	<tr>
		<!--<td align = "left"><input id="showGenderStatistics" type="click" class="yui3-button" value="Show gender statistics" /></td>-->
		<TD>		Statistics:                           </td>
		<!--<td><a href="<input id="showGenderStatistics" />-->
		
	</tr>
</table>
<table>
	<tr>
		<TD VALIGN=TOP ALIGN=LEFT>
			<div id="genderStatisticsChart"></div>
		</td>
	</tr>
</table>
<script src="http://yuiblog.com/sandbox/yui/3.3.0pr3/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'io',	'json-parse', 'charts', 'charts-legend', function(Y) {
	    var callback1 = {
		timeout : 5000,
		on : {
		    success : function(x, o) {
			var genderValues = [];
			try {
			    genderValues = Y.JSON.parse(o.responseText);
			} catch (e) {
			    alert("JSON Parse failed!");
			    return;
			}

			new Y.Chart({
			    render : "#genderStatisticsChart",
			    categoryKey : "gender",
			    seriesKeys : [ "count" ],
			    dataProvider : genderValues,
			    width : 150,
				height : 150,
			    type : "pie",
			     legend: {
                            position: "right",
                            width: 300,
                            height: 300,
                            styles: {
                                hAlign: "center",
                                hSpacing: 4
                            }
                        }
			});

		    },
		    failure : function(x, o) {
			alert("Async call failed!");
		    }
		}
    };

   <!-- Y.one('#showGenderStatistics').on('click', function() { -->
		//Y.one('#genderStatisticsChartContainer').show(true);
		// Make the call to the server for JSON data
		getGenderStatistics = Y.io("/FreemarkerTutorial/testJson",	callback1);
	<!--    }); -->
	});
</script>